<template>
    <div class="news">
        <div class="news__con">
            <CustomBreadcrumb :breadcrumbList="breadcrumbList"></CustomBreadcrumb>
            <div class="news__list" v-loading="loading">
                <div class="news__list__box">
                    <div
                        class="news__opt"
                        v-for="(item, index) in list"
                        :key="`news${index}`"
                        @click="toDetail(item.objectId)"
                    >
                        <div class="news__opt__top">
                            <div class="news__opt__status">动态</div>
                            <div class="news__opt__time">{{ item.createTime }}</div>
                        </div>
                        <div class="news__opt__title">{{ item.title }}</div>
                        <div class="news__opt__desc">{{ item.description }}</div>
                    </div>
                    <el-empty v-if="!list.length && !loading" description="暂无数据"></el-empty>
                </div>
            </div>
            <div class="news__pagination" v-if="list.length">
                <CustomPagination
                layout="prev, pager, next"
                :total-items="totalItems"
                :page-size="pageSize"
                :current-page="pageNum"
                @pagination-current-change="handleCurrentChange"
                ></CustomPagination>
            </div>
            
        </div>
    </div>
</template>
<script>
import CustomBreadcrumb from '@/components/CustomBreadcrumb.vue';
import CustomPagination from '@/components/CustomPagination.vue';
import { getNewsData } from '@/api/news.js'
export default {
    components: {
        CustomBreadcrumb,
        CustomPagination
    },
    data() {
        return {
            breadcrumbList: [
                {
                    name: '新闻动态',
                    url: '',
                },
            ],
            list: [],
            totalItems: 0,
            pageSize: 12,
            pageNum: 1,
            loading: true
        }
    },
    mounted() {
        this.getList()
    },
    methods: {
        async getList() {
            this.loading = true;
            const res = await getNewsData({
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                title: ""
            })
            if (res) {
                console.log(res)
                this.list = res.list || []
                this.totalItems = res.total || 0
            }
            this.loading = false;
        },
        toDetail(id) {
            const url = this.$router.resolve({
                path: '/news/detail',
                query: {
                    id
                }
            }).href;
            window.open(url, '_blank');
        },
        handleCurrentChange(newPage) {
            this.pageNum = newPage;
            this.getList();
        }
    }
}
</script>
<style lang="scss">
.news {
    background-color: #f7f7f7;
    padding-bottom: 30px;
    &__con {
        width: 1352px;
        margin: 0 auto;
        overflow: hidden;
        padding-top: 20px;
    }
    &__list {
        padding: 20px;
        background-color: #fff;
        border-radius: 8px;
        // min-height: calc(100vh - 540px);
        margin-top: 30px;
        &__box {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 0 24px;
        }
    }
    &__opt {
        padding-bottom: 16px;
        border-bottom: 1px solid #F0F0F0;
        margin-bottom: 20px;
        cursor: pointer;
        &__top {
            display: flex;
            align-items: center;
            font-size: 12px;
        }
        &__status {
            padding: 3px 8px;
            background-color: #FAF2C9;
            color: #AA9224;
            margin-right: 12px;
            border-radius: 3px;
        }
        &__time {
            color: #8c8c8c;
        }
        &__title {
            font-size: 16px;
            color: #3e3e3e;
            font-weight: bold;
            margin-top: 16px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        &__desc {
            @include ellipsis2(3);
            font-size: 14px;
            margin-top: 8px;
            color: #3e3e3e;
            line-height: 26px;
        }
    }
    &__pagination {
        background-color: #fff;
        margin-top: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 30px 0;
        border-radius: 8px;
    }
}
</style>